<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>关于伪元素::before和::after使用的介绍</title>
	<style type="text/css" media="screen">
		
		body {
			font: 10pt Arial, sans-serif;
			color: #555;
		}
		section {
			width: 500px;
			margin: 100px auto 0;
		}
		p {
			margin: 0;
			padding: 0 40px;
			text-align: center;
			float: left;
		}
		blockquote div {
			text-align: right;
		}
		blockquote:before {
			content: open-quote;
			float: left;
			
			font-size: 24pt;
			text-align: center;
			line-height: 42px;
			color: #fff;
			background: #ddd;
			position: relative;
			top: 30px;
			border-radius: 25px;

			display: block;
			height: 25px;
			width: 25px;

			transition: all 350ms;
			-o-transition: all 350ms;
			-moz-transition: all 350ms;
			-webkit-transition: all 350ms;
		}
		blockquote:after {
			content: close-quote;
			float: right;

			font-size: 24pt;
			text-align: center;
			line-height: 42px;
			color: #fff;
			background: #ddd;
			position: relative;
			bottom: 40px;
			border-radius: 25px;

			display: block;
			height: 25px;
			width: 25px;

			transition: all 350ms;
			-o-transition: all 350ms;
			-moz-transition: all 350ms;
			-webkit-transition: all 350ms;
		}
		blockquote:hover:after, blockquote:hover:before {
			background-color: #555;
		}
	</style>
</head>
<body>
	<section>
		<blockquote>
			<p>
				Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it's really how it works.
			</p>
		</blockquote>
	</section>
	

</body>
</html>